<template>
	<view class="forget-container">
		<view class="custom-nav">
			<view class="back-btn" @click="goBack">
				<image src="/static/icons/back.png" class="back-icon" />
			</view>
			<text class="nav-title">找回密码</text>
		</view>

		<view class="form-box">
			<input v-model="phone" placeholder="手机号" class="input-item" type="number" />
			<input v-model="code" placeholder="验证码" class="input-item code-input" />
			<input v-model="newPassword" placeholder="新密码（6-20位）" class="input-item" type="password" />

			<button class="submit-btn" :style="{backgroundColor: '#9BBFE0'}" @click="handleReset">
				重置密码
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				code: '',
				newPassword: ''
			}
		},
		methods: {
			async handleReset() {
				// 基础验证
				if (!/^1[3-9]\d{9}$/.test(this.phone)) {
					uni.showToast({
						title: '手机号格式错误',
						icon: 'none'
					})
					return
				}
				if (this.newPassword.length < 6) {
					uni.showToast({
						title: '密码至少6位',
						icon: 'none'
					})
					return
				}
				if (this.code.length !== 6) {
					uni.showToast({
						title: '请输入6位验证码',
						icon: 'none'
					})
					return
				}

				try {
					// 验证手机号是否存在
					const checkRes = await uni.request({
						url: 'http://localhost:5000/api/auth/check-phone',
						method: 'POST',
						data: {
							phone: this.phone
						}
					})
					
					console.log('检查结果:', checkRes.data); // 调试日志
					
					if (!checkRes.data.exist) {
						uni.showToast({
							title: '该手机号未注册',
							icon: 'none'
						})
						return
					}

					// // 验证验证码
					// const codeRes = await uni.request({
					// 	url: 'https://your-api-domain.com/sms/verify',
					// 	method: 'POST',
					// 	data: {
					// 		phone: this.phone,
					// 		code: this.code
					// 	}
					// })

					// if (!codeRes.data.valid) {
					// 	uni.showToast({
					// 		title: '验证码错误',
					// 		icon: 'none'
					// 	})
					// 	return
					// }

					// 执行密码重置
					const resetRes = await uni.request({
						url: 'http://localhost:5000/api/auth/reset-password',
						method: 'POST',
						data: {
							phone: this.phone,
							newPassword: this.newPassword
						}
					})

					if (resetRes.statusCode === 200) {
						uni.showToast({
							title: '密码重置成功'
						})
						setTimeout(() => uni.navigateBack(), 1500)
					} else {
						uni.showToast({
							title: resetRes.data.message || '重置失败',
							icon: 'none'
						})
					}
				} catch (err) {
					uni.showToast({
						title: '网络请求失败',
						icon: 'none'
					})
				}
			},
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped>
	/* 复用注册页样式 */
	/* 使用scoped避免样式污染 */
	.login-container {
		background-color: #FDF5E7;
		height: 100vh;
	}

	.custom-nav {
		height: 88rpx;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		border-radius: 0 0 20rpx 20rpx;
	}

	.back-btn {
		width: 60rpx;
		height: 60rpx;
		padding: 10rpx;
	}

	.back-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.nav-title {
		color: #9BBFE0;
		font-size: 36rpx;
		margin-left: 30rpx;
		font-weight: bold;
	}

	.form-box {
		padding: 60rpx 80rpx;
	}

	.input-item {
		height: 100rpx;
		background: white;
		margin-bottom: 40rpx;
		border-radius: 50rpx;
		padding: 0 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(155, 191, 224, 0.2);
	}

	.login-btn {
		height: 100rpx;
		line-height: 100rpx;
		color: white;
		border-radius: 50rpx;
		margin-top: 60rpx;
		font-size: 32rpx;
		letter-spacing: 4rpx;
	}

	.forget-container {
		background-color: #FDF5E7;
		height: 100vh;
	}
</style>